<template>
  <div class="home">
    <ElRow type="flex" justify="center">
      <ElCol :xl="{ span: 24 }" :md="{ span: 17 }">
        <div class="mytitle">
          <p class="header-h2" ref="h2">{{ typewriter }}</p>
        </div>
        <search-vue />

        <article-vue style="background-color: #fff; padding: 20px" />
      </ElCol>
    </ElRow>
    <footer-vue></footer-vue>
  </div>
</template>

<script>
import ArticleVue from "../components/Article.vue";
import FooterVue from "../components/Footer.vue";
import { VISITOR } from "@/api/Article";
import searchVue from "../components/search.vue";

// @ is an alias to /src

export default {
  name: "Home",
  data() {
    return {
      i: 0,
      str: "趁我们头脑发热，我们要不顾一切",
      typewriter: "",
      timeEnd: 0,
    };
  },
  components: {
    ArticleVue,
    FooterVue,
    searchVue,
  },
  created() {
    VISITOR();
  },
  mounted() {
    setTimeout(() => {
      this.titleSty();
    }, 1500);
  },
  methods: {
    titleSty() {
      if (this.i <= this.str.length) {
        this.typewriter = this.str.slice(0, this.i++);
        this.timeEnd = setTimeout(() => this.titleSty(), 150);
      } else {
        clearTimeout(this.timeEnd);
      }
    },
  },
};
</script>
<style lang="scss" scoped>
.home {
  // margin-top: 150px;\
  .mytitle {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 200px;
    font-size: 2em;
    padding: 0 10%;
    font-family: monospace;
    color: #333;
    .header-h2::after {
      content: "|";
      animation: identifier2 0.5s step-end infinite alternate;
    }
  }
}
@keyframes identifier2 {
  50% {
    opacity: 0;
  }
}
</style>
